<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery Ajax</title>
</head>

<body>
    <p id="show-id" style="color: blue;border: 1px solid black; width: 500px;height: 400px;">

    </p>
    <button onclick="getData()">获取数据</button>
    <button onclick="getNormalData()">获取普通数据</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        function getData() {
            $.getJSON("../mock/mock_data.json", function (data) {
                console.log(data);
                console.log(data.name);

                // $('#show-id').html(JSON.stringify(data));

                let doc = `
                    <span>课程名：${data.name}</span><br/>
                    <span>编码：${data.code}</span>
                `;
                $('#show-id').html(doc);
            });
        };

        $(document).ajaxSuccess(function (event, request, settings) {
            console.log("获取成功！！！");
        });

        $(document).ajaxSend(function (event, request, settings) {
            console.log("请求发送！！！");
        });

        function getNormalData() {
            $.get("../mock/mock_normal_data.txt", { name: "John" },
                function (data) {
                    $('#show-id').html(data);
                });
        }

    </script>
</body>

</html>